<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="实验室状态统计" name="first">
        <div>
          <div id="state" :style="{width: '100%', height: '550px',backgroundColor:'#fff',marginTop:'30px'}" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="实验室使用次数统计" name="second" style="overflow: hidden">
        <div class="block" style="float: right">
          <el-date-picker
            v-model="alarmdate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleFilterBar(3)"/>
        </div>
        <div id="totalUse" :style="{width: '100%', height: '550px',backgroundColor:'#fff',marginTop: '120px'}" />
      </el-tab-pane>

      <el-tab-pane label="实验室预约次数统计" name="third" style="overflow: hidden">
        <div class="block" style="float: right">
          <el-date-picker
            v-model="alarmdate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleFilterBar(1)"/>
        </div>
        <div id="totalYuyue" :style="{width: '100%', height: '550px',backgroundColor:'#fff',marginTop: '120px'}" />
      </el-tab-pane>

      <el-tab-pane label="实验室取消次数统计" name="fourth" style="overflow: hidden">
        <div class="block" style="float: right">
          <el-date-picker
            v-model="alarmdate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleFilterBar(2)"/>
        </div>
        <div id="total" :style="{width: '100%', height: '550px',backgroundColor:'#fff',marginTop: '120px'}" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}

.el-button+.el-button {
  margin-left: 1px;
}
</style>

<script>
import { getState, getStateBar } from '@/api/report.js'
import moment from 'moment'
export default {
  name: 'Report',
  data() {
    return {
      activeName: 'first',
      alarmdate: '',
      start: '', // 开始日期
      end: '' // 结束日期
    }
  },
  created() {
    // 状态统计
    this.handleFilter()
    // 提前一周
    // var dateweek = new Date()
    // var dateweeks = dateweek.getFullYear() + '-' + (dateweek.getMonth() + 1) + '-' + (dateweek.getDate()-7) +' '+ dateweek.getHours() + ':' + dateweek.getMinutes()+':' +dateweek.getSeconds();
    var dateweeks = new Date(new Date().getTime() - (6 * 24 * 60 * 60 * 1000))
    // 当前时间
    var date = new Date()
    var dates = new Date()
    // var dates = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate()) +' '+ date.getHours() + ':' + date.getMinutes()+':' +date.getSeconds();
    this.alarmdate = [
      dateweeks,
      dates
    ]
    console.log('时间戳')
    console.log(this.alarmdate)
    this.start = moment(dateweeks).format('YYYY-MM-DDHH:mm:ss')
    this.end = moment(date).format('YYYY-MM-DDHH:mm:ss')
    // this.start = dateweek.getFullYear().toString() + (dateweek.getMonth() + 1).toString()  + (dateweek.getDate()-7).toString()
    // this.end = date.getFullYear().toString()  + (date.getMonth() + 1).toString()   + (date.getDate()).toString()
  },
  methods: {
    dateFormat(date) { // date为中国标准时间:例 new Date()结果的格式
      var year = date.getFullYear().toString()
      var month = date.getMonth() + 1
      if (month < 10) {
        month = '0' + month.toString()
      } else {
        month = month.toString()
      }
      var day = date.getDate()
      if (day < 10) {
        day = '0' + day.toString()
      } else {
        day = day.toString()
      }
      return year + '-' + month + '-' + day // 返回格式为20190615
    },
    formatDate: function(date) {
      var ym
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      if (m < 10) {
        m = '0' + m
      }
      if (d < 10) {
        d = '0' + d
      }
      ym = y + m + d
      return ym
    },
    handleClick(tab) {
      if (tab.index === 1) {
        // 使用
        this.handleFilterBar(3)
      } else if (tab.index === 2) {
        // 预约
        this.handleFilterBar(1)
      } else if (tab.index === 3) {
        // 取消
        this.handleFilterBar(2)
      } else {
        // 状态统计
        this.handleFilter()
      }
    },
    // 状态统计 饼状图
    handleFilter() {
      getState()
        .then((response) => {
          this.dataList = response.data.data.list
          if (this.dataList) {
            console.log('this.dataList', this.dataList)
            const datas = [
              { name: '房间数', value: this.dataList[0].roomNum },
              { name: '即将开始', value: this.dataList[0].upcomingCount },
              { name: '会议中', value: this.dataList[0].underwayCount },
              { name: '空闲数', value: this.dataList[0].leisureCount }
            ]
            this.showChartPie(datas)
          }
        })
        .catch(() => {
          this.dataList = []
        })
    },
    showChartPie(datas) {
      const legend = datas.map(function(item) {
        return item.name
      })

      // 基于准备好的dom，初始化echarts实例
      const state = this.$echarts.init(document.getElementById('state'))
      // 绘制图表
      state.setOption({
        legend: {
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: legend,
          textStyle: {
            // 图例文字的样式
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        color: ['#03a9f4', '#fcbe36', '#f66a6e', '#36cc79'],
        tooltip: {
          trigger: 'item'
        },
        series: {
          name: '图表',
          type: 'pie',
          data: datas,
          label: {
            normal: {
              show: true,
              formatter: '{d} %',
              fontSize: 22
            }
          }
        }
      })
    },
    // 柱状图
    handleFilterBar(e) {
      getStateBar({
        start: this.start,
        end: this.end,
        status: e
      })
        .then((response) => {
          this.dataList = response.data.data.list
          if (this.dataList) {
            const barDatas = []
            const faqi1 = []
            const datas = []
            this.dataList.map(function(item) {
              faqi1.push(item.number)
              datas.push(item.roomName)
            })
            barDatas.push({
              type: 'bar',
              data: faqi1,
              backgroundStyle: {
                color: '#4472C5'
              }
            //   label: {
            //     show: true,
            //     position: 'inside'
            // },
            })
            // 取消
            if (e === 2) {
              this.showChartBar(datas, barDatas)
            } else if (e === 1) {
              // 预约
              this.showChartBarYuyue(datas, barDatas)
            } else {
              // 使用
              this.showChartBarUse(datas, barDatas)
            }
          }
        })
        .catch(() => {
          this.dataList = []
        })
    },

    showChartBar(datas, barDatas) {
      // 基于准备好的dom，初始化echarts实例
      const total = this.$echarts.init(
        document.getElementById('total')
      )
      // 绘制图表
      total.setOption({
        color: ['#6d88f4'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: datas,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        series: barDatas
      })
    },

    showChartBarYuyue(datas, barDatas) {
      // 基于准备好的dom，初始化echarts实例
      const total = this.$echarts.init(
        document.getElementById('totalYuyue')
      )
      // 绘制图表
      total.setOption({
        color: ['#6d88f4'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: datas,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        series: barDatas
      })
    },

    showChartBarUse(datas, barDatas) {
      // 基于准备好的dom，初始化echarts实例
      const total = this.$echarts.init(
        document.getElementById('totalUse')
      )
      // 绘制图表
      total.setOption({
        color: ['#6d88f4'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: datas,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        series: barDatas
      })
    }

  }
}
</script>
